<template>
  <div class="backend-guide">
    <el-card class="guide-card">
      <template #header>
        <div class="card-header">
          <el-icon><Setting /></el-icon>
          <span>后端服务启动指南</span>
        </div>
      </template>
      
      <div class="guide-content">
        <h3>🚀 启动后端服务</h3>
        <ol>
          <li>打开后端项目目录</li>
          <li>确保MySQL数据库正在运行</li>
          <li>运行以下命令启动后端服务：</li>
        </ol>
        
        <el-input
          v-model="startCommand"
          readonly
          class="command-input"
        >
          <template #prepend>命令</template>
          <template #append>
            <el-button @click="copyCommand">复制</el-button>
          </template>
        </el-input>
        
        <div class="checklist">
          <h4>✅ 检查清单</h4>
          <el-checkbox v-model="checks.database" disabled>MySQL数据库运行正常</el-checkbox>
          <el-checkbox v-model="checks.backend" disabled>后端服务启动成功</el-checkbox>
          <el-checkbox v-model="checks.port" disabled>端口8081未被占用</el-checkbox>
          <el-checkbox v-model="checks.api" disabled>API接口可访问</el-checkbox>
        </div>
        
        <div class="troubleshooting">
          <h4>🔧 常见问题</h4>
          <el-collapse>
            <el-collapse-item title="端口被占用" name="1">
              <p>如果8081端口被占用，可以：</p>
              <ul>
                <li>修改后端配置文件中的端口号</li>
                <li>停止占用端口的其他服务</li>
                <li>使用 <code>netstat -ano | findstr :8081</code> 查看端口占用</li>
              </ul>
            </el-collapse-item>
            
            <el-collapse-item title="数据库连接失败" name="2">
              <p>检查数据库配置：</p>
              <ul>
                <li>确保MySQL服务正在运行</li>
                <li>检查数据库用户名和密码</li>
                <li>确认数据库名称正确</li>
              </ul>
            </el-collapse-item>
            
            <el-collapse-item title="API接口404错误" name="3">
              <p>检查后端配置：</p>
              <ul>
                <li>确认后端服务完全启动</li>
                <li>检查API路径是否正确</li>
                <li>查看后端控制台日志</li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'BackendGuide',
  components: {
    Setting
  },
  setup() {
    const startCommand = ref('mvn spring-boot:run')
    const checks = ref({
      database: false,
      backend: false,
      port: false,
      api: false
    })
    
    const copyCommand = () => {
      navigator.clipboard.writeText(startCommand.value).then(() => {
        ElMessage.success('命令已复制到剪贴板')
      }).catch(() => {
        ElMessage.error('复制失败，请手动复制')
      })
    }
    
    return {
      startCommand,
      checks,
      copyCommand
    }
  }
}
</script>

<style scoped>
.backend-guide {
  padding: 20px;
}

.guide-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #333;
}

.guide-content h3 {
  margin: 20px 0 15px 0;
  color: #333;
}

.guide-content ol {
  margin: 15px 0;
  padding-left: 20px;
}

.guide-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.command-input {
  margin: 20px 0;
}

.checklist {
  margin: 20px 0;
}

.checklist h4 {
  margin-bottom: 15px;
  color: #333;
}

.checklist .el-checkbox {
  display: block;
  margin-bottom: 8px;
}

.troubleshooting {
  margin-top: 30px;
}

.troubleshooting h4 {
  margin-bottom: 15px;
  color: #333;
}

.troubleshooting ul {
  margin: 10px 0;
  padding-left: 20px;
}

.troubleshooting li {
  margin-bottom: 5px;
  line-height: 1.6;
}

.troubleshooting code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}
</style>
